<template>
  <div class="comments">
    <van-field
    class="my-field"
    ref="getfoule"
      v-model="message"
      rows="2"
      autosize
      label="留下评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入BB的内容"
      show-word-limit
      @keyup.enter="postComments"
    />
    <van-button type="primary" block class="my-button" @click="postComments"> 发表评论</van-button>
    <div class="comments-list">
      <van-card
       v-for="(item,index) in comments"
        :key="index"
        :desc="item.content"
      >
        <template #thumb>
            <van-icon class="user-icon" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            <div  class="user-name">
              vip匿名用户
            </div>
        </template>
        <template #title>
          <van-rate v-model="item.rate" readonly />
        </template>
        <template #price>
          {{item.add_time}}
        </template>
      </van-card>
    </div>
    <van-loading size="24px" v-if="isLoadimg">加载中...</van-loading>
    <button class="more" @click="getmore" v-else>{{hasMore?"我也是有底线的":"加载更多"}}</button>
  </div>
</template>
<script>
export default {
  props:['id'],
  data () {
    return {
      pageNo:0,
      pageSize:5,
      comments:[],
      message:"",
      hasMore:false,
      isLoadimg:false
    }
  },
  created () {
    this.getComments()
  },
  methods:{
    async getComments () {
      if (this.hasMore !== false) return
      ++this.pageNo
      const res = await this.$http.getComments({ id:this.id, pageNo:this.pageNo, pageSize:this.pageSize })
      this.comments = this.comments.concat(res.data.message)
      if (this.pageNo * this.pageSize > res.data.count) {
        this.hasMore = true
      }
    },
    async getmore () {
      this.isLoadimg = true
      await this.getComments()
      this.isLoadimg = false
    },
    async postComments () {
      if (!this.message) return
      await this.$http.postComments({ id:this.id, content:this.message })
      this.comments.unshift({
        add_time: "2018-07-15 18:14:23",
        artid: this.id,
        content:this.message,
        isdel: 0,
        rate: parseInt(Math.random() * 5),
        user_name: "匿名用户"
      })
      console.log(this.comments)
      console.log(this.message)
      this.message = ""
      this.$refs.getfoule.focus()
    }
  }
}
</script>
<style lang="scss" >
.comments{
  .my-field{
    border: 1px solid #eee;
  }
  .van-cell__title{
      font-size: 16px;
      font-weight: 600;
  }
  .my-button{
    margin: 10px 0;
  }
  .comments-list{
    .user-icon{
      font-size: 50px;
    }
    .user-name{
      font-size: 14px;
      font-weight: 600;
    }
    .van-card__desc{
      margin: 10px 0px ;
    }
  }
  .more{
    border: none;
    background: #fff;
    color: rgb(139, 139, 139);
    width: 100%;
    text-align: center ;
    line-height: 30px;
    font-size: 14px;
    margin-top: 5px;
  }
  .van-loading{
    width: 100%;
    text-align: center;
    padding-top: 5px;
  }
}
</style>
